import 'package:flutter/material.dart';
import 'package:flutter_axrjc/routes.dart';
import 'package:flutter_axrjc/style.dart';
import 'package:flutter_axrjc/widget/common_widget.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import 'logic.dart';

class KnowledgeForEyeWithTypePage extends StatelessWidget {
  const KnowledgeForEyeWithTypePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<KnowledgeForEyeWithTypeLogic>();
    final state = Get.find<KnowledgeForEyeWithTypeLogic>().state;

    return Scaffold(
      backgroundColor: const Color(0xffEFEFEF),
      appBar: AppBar(
        leading:
            InkWell(onTap: Get.back, child: const Icon(Icons.arrow_back_ios)),
        title: const Text("护眼知识"),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Obx(() {
            return TabBar(
              controller: logic.tabArticle,
              onTap: (index) {
                state.currentType = "${state.tabs[index].categoryId}";
                logic.getList(isRefresh: true);
              },
              tabs: state.tabs
                  .map((element) => Tab(
                      height: 40,
                      iconMargin: EdgeInsets.zero,
                      child: Text("${element.categoryName}")))
                  .toList(),
              indicatorSize: TabBarIndicatorSize.label,
              padding: EdgeInsets.zero,
              indicatorPadding: EdgeInsets.zero,
              indicatorWeight: 2,
              labelColor: orangeColor,
              unselectedLabelColor: Colors.black,
              indicatorColor: orangeColor,
              labelPadding: const EdgeInsets.symmetric(horizontal: 10),
              isScrollable: true,
              automaticIndicatorColorAdjustment: true,
            );
          }),
          Expanded(
            child: SmartRefresher(
              header: reFreshHeader(),
              footer: loadFooter(),
              enablePullUp: true,
              enablePullDown: true,
              onLoading: () {
                logic.getList(isRefresh: false);
              },
              onRefresh: () {
                logic.getList(isRefresh: true);
              },
              controller: logic.refreshController,
              child: Obx(() {
                return ListView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  itemCount: state.list.length,
                  itemBuilder: (BuildContext context, int index) {
                    var bean = state.list[index];
                    return GestureDetector(
                      onTap: () {
                        Get.toNamed(MainRoutes.knowledgeDetail,
                            arguments: bean);
                      },
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Container(
                          padding: const EdgeInsets.all(15),
                          decoration: const BoxDecoration(color: Colors.white),
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Expanded(
                                  child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    "${bean.articleTitle}",
                                    style: const TextStyle(
                                        fontSize: 14, color: Color(0xff3d3d3d)),
                                  ),
                                  const SizedBox(
                                    height: 5,
                                  ),
                                  Text(
                                    "${bean.articleContent}",
                                    maxLines: 2,
                                    style: const TextStyle(
                                        fontSize: 12, color: Color(0xff3d3d3d)),
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ],
                              )),
                              bean.articelHomePic == null
                                  ? Container()
                                  : Row(
                                      children: [
                                        const SizedBox(
                                          width: 10,
                                        ),
                                        ClipRRect(
                                          borderRadius:
                                              BorderRadius.circular(5),
                                          child: SizedBox(
                                            width: 80,
                                            height: 80,
                                            child: Image.network(
                                              "${bean.articelHomePic}",
                                              fit: BoxFit.cover,
                                            ),
                                          ),
                                        )
                                      ],
                                    )
                            ],
                          ),
                        ),
                      ),
                    );
                  },
                );
              }),
            ),
          ),
        ],
      ),
    );
  }
}
